<!-- 品质信息模块 -->
<script lang="jsx" setup>
import { computed, ref } from 'vue';
import { isEmpty } from 'lodash-es';
import { Empty } from 'ant-design-vue';
import useResetTableRef from '@/hooks/common/resetTableRef';
import { getQualityInfo } from '@/service/api/modules/trace/one-code-trace';
import QualityInformationItem from './components/quality-information-item.vue';
import qualityList, { initData, processMapArr } from './components/quality-information-item';
import QualityInformationItemDetail from './components/quality-information-item-detail.vue';

const simpleImage = Empty.PRESENTED_IMAGE_DEFAULT;
const isGetOk = ref(false);
const [qualityData, reset] = useResetTableRef(initData);

function getColumnConfig(fileName) {
  const file = import.meta.glob(`./iqpc-column/*.js`, { eager: true });
  let columnConfig;
  Object.entries(file).forEach(([path, config]) => {
    const pathArr = path.split('/');
    const fullPathFileName = pathArr[pathArr.length - 1];
    if (fullPathFileName === `${fileName}.js`) {
      columnConfig = config;
    }
  });
  return columnConfig.default;
}

const quality = ref('all');

const computedList = computed(() => {
  if (quality.value === 'all') {
    return qualityList;
  }
  return qualityList.filter(item => item.type === quality.value);
});

function getData(params) {
  getQualityInfo(params).then(({ data, error }) => {
    if (!error) {
      qualityData.value = data;
      isGetOk.value = true;
    }
  });
}

const detailColumns = ref([]);
const visible = ref(false);
const currentTitle = ref('');
const currentData = ref({});
function handleShowDetail(fileName, title) {
  console.log('fileName', fileName);

  if (!fileName) return;
  currentData.value = qualityData.value[title];
  console.log('currentData.value', currentData.value);

  currentTitle.value = title;
  detailColumns.value = getColumnConfig(fileName);
  console.log('detailColumns.value', detailColumns.value);

  visible.value = true;
}

defineExpose({
  reset,
  getData
});
</script>

<template>
  <div class="quality-information h-full w-full">
    <div class="search mb-8px">
      <ARadioGroup v-model:value="quality" button-style="solid">
        <ARadioButton v-for="item in processMapArr" :key="item.value" :value="item.value">
          {{ item.label }}
        </ARadioButton>
      </ARadioGroup>
    </div>
    <ARow v-if="!isEmpty(qualityData)" :gutter="[15, 15]" class="quality-information-row">
      <ACol v-for="(item, index) in computedList" :key="index" :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
        <template v-if="qualityData[item.title]">
          <QualityInformationItem
            v-model:data="qualityData[item.title][qualityData[item.title].length - 1]"
            :list="item.list"
            :title="item.title"
            :column-file-name="item.columnFileName"
            @show-detail="
              fileName => {
                handleShowDetail(fileName, item.title);
              }
            "
          ></QualityInformationItem>
        </template>
      </ACol>
    </ARow>
    <div v-else class="no-data h-full w-full flex-center">
      <AEmpty :image="simpleImage" description="暂无品质信息" />
    </div>

    <Modal
      v-model:visible="visible"
      :title="`${currentTitle}详情`"
      height="70vh"
      width="800px"
      destroy-on-close
      :show-confirm-btn="false"
      cancel-btn-text="关闭"
    >
      <QualityInformationItemDetail v-model:list="detailColumns" v-model:data="currentData" :title="currentTitle" />
    </Modal>
  </div>
</template>

<style lang="scss" scoped>
.quality-information {
  padding-top: 10px;
  height: 100%;

  .quality-information-row {
    height: calc(100% - 40px);
    margin-right: 0 !important;
    overflow-y: auto;
  }
}
</style>
